<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
        <title>Unsemantic CSS Framework</title>
        <!--[if lt IE 9]>
          <script src="./assets/javascripts/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="./assets/stylesheets/demo.css" />
        <!--[if (gt IE 8) | (IEMobile)]><!-->
        <link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-rtl.css" />
        <!--<![endif]-->
        <!--[if (lt IE 9) & (!IEMobile)]>
          <link rel="stylesheet" href="./assets/stylesheets/ie-rtl.css" />
        <![endif]-->
    </head>
    <body>
        <div class="grid-container">
            <div class="grid-100 mobile-grid-100">
                <h1 class="grid-100">
                    <a href="http://unsemantic.com/">Unsemantic</a>
                    <br />
                    Responsive Demo - <abbr title="Right To Left">RTL</abbr>
                </h1>
                <hr />
            </div>
            <div class="grid-100 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        100%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-95 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        95%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-5 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        5%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        90%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-85 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        85%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-15 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        15%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-80 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        80%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-75 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        75%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-70 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        70%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-30 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        30%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-65 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        65%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-35 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        35%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-60 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        60%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-40 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        40%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-55 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        55%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-45 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        45%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        50%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        50%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-66 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        66%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <hr />
            <div class="grid-100 align-center">
                <h3>
                    Prefix &amp; Suffix
                </h3>
            </div>
            <div class="grid-10 suffix-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-10 suffix-80 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-20 suffix-70 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-30 suffix-60 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-40 suffix-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-50 suffix-40 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-60 suffix-30 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-70 suffix-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-80 suffix-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 prefix-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <hr />
            <div class="grid-100 align-center">
                <h3>
                    Push &amp; Pull (for SEO)
                </h3>
                <p>
                    Green = push. Pink = pull.
                </p>
            </div>
            <div class="grid-10 push-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 push-30 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 pull-30 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 pull-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 push-60 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 pull-60 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 push-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 pull-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-66 push-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        66%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 pull-66 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 push-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 pull-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33%
                    </b>
                    <b class="hide-on-desktop">
                        50%
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <hr />
            <div class="grid-100 align-center">
                <h3>
                    Nested Columns
                </h3>
            </div>
            <div class="grid-50 grid-parent">
                <p class="grid-100 align-center">
                    <b>
                        Parent Column
                    </b>
                </p>
                <div class="grid-50 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            50%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-50 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            50%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
            </div>
            <div class="grid-50 grid-parent">
                <p class="grid-100 align-center">
                    <b>
                        Parent Column
                    </b>
                </p>
                <div class="grid-50 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            50%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-50 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            50%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
            </div>
            <div class="grid-50 grid-parent">
                <p class="grid-100 align-center">
                    <b>
                        Parent Column
                    </b>
                </p>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
            </div>
            <div class="grid-50 grid-parent">
                <p class="grid-100 align-center">
                    <b>
                        Parent Column
                    </b>
                </p>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
                <div class="grid-25 mobile-grid-50">
                    <section class="example-block">
                        <b class="hide-on-mobile">
                            25%
                        </b>
                        <b class="hide-on-desktop">
                            50%
                        </b>
                        <span class="dynamic-px-width"></span>
                    </section>
                </div>
            </div>
        </div>
        <script src="./assets/javascripts/jquery.js"></script>
        <script src="./assets/javascripts/demo.js"></script>
    </body>
</html>